<template>
  <div>
    <van-nav-bar title="新建病历" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="top">
      <div class="box"></div>
      <div class="item">
        <van-cell title="病历所属人" value="admin(自己)" />
      </div>
      <div class="item">
        <van-cell title="记录时间" class="label" :value="date" @click="show = true" />
        <van-calendar
          v-model:show="show"
          @confirm="onConfirm"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </div>
    </div>
    <div class="mid">
      <div class="box"></div>
      <van-tabs v-model:active="activeName">
        <van-tab title="健康备忘" name="a">
          <div class="e">
            <p>健康相关信息随手拍 (最多可添加50张)</p>
            <van-uploader v-model="fileList" multiple />
          </div>
          <div class="d">
            <h4>备注</h4>
            <p>记录日常需备忘的治疗与护理方法、生活注意事项、药品药方等信息</p>
          </div>
          <textarea placeholder="请输入备注" v-model="textar" />
        </van-tab>
        <van-tab title="门诊记录" name="b">
          <div class="e">
            <p>
              上传照片，如检查单、CT、病历、患处、药品等，春雨会保障您的隐私安全 (最多可添加50张)
            </p>
            <van-uploader v-model="fileList" multiple />
          </div>

          <div class="d">
            <h4>备注</h4>
            <p>记录问诊的医生、医院、检查结果、诊断、医嘱等信息</p>
          </div>
          <textarea placeholder="请输入备注" v-model="twxtar" />
        </van-tab>
      </van-tabs>
    </div>
    <div class="btn" @click="sa()">保存</div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
import { ref } from 'vue'
const formatDate = (date: any) => {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
}
const onClickLeft = () => {
  router.go(-1)
}
const date = ref('')
const show = ref(false)
const textar = ref('')
const onConfirm = (value: any) => {
  show.value = false
  date.value = formatDate(value)
}
const minDate = new Date(2004, 1, 1)
const maxDate = new Date()
const activeName = ref('a')
const fileList = ref([
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
  { url: 'https://cloud-image', isImage: true }
])
const sa = () => {
  localStorage.setItem('time', date.value)
  localStorage.setItem('talk', textar.value)
  router.go(-1)
}
</script>
<style>
template {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  background-color: #f5f7fa;
  font-size: 14px;
  color: #323233;
  font-family:
    PingFang SC,
    Hiragino Sans GB,
    Microsoft YaHei UI,
    Microsoft YaHei,
    Microsoft JhengHei,
    WenQuanZheng Hei,
    SimSun,
    sans-serif;
}
.btn {
  width: 100%;
  height: 55px;
  background: #00ea6e;
  color: #ffffff;
  text-align: center;
  line-height: 55px;
  position: absolute;
  bottom: 40px;
  left: 0px;
}
textarea {
  width: 100%;
  height: 170px;
  border: none;
  background-color: #f7f7f7;
  margin-top: 20px;
}
.box {
  width: 100%;
  background: #f7f7f7;
  height: 15px;
}
.d {
  width: 100%;
  height: 80px;
  line-height: 30px;
}
.e {
  width: 100%;
  height: 140px;
  line-height: 30px;
}
p {
  color: #909399;
}
</style>
